// createRouter  创建路由实例的函数
// createWebHashHistory  创建hash路由函数     另外一个是history模式
import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout.vue'
import Home from '@/views/home/index.vue'

// 路由 ：路径和组件映射关系
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/',
        component: Home
      },
      {
        path: 'category/:id',
        component: () => import('@/views/category/index.vue')
      },
      {
        path: 'category/sub/:id',
        component: () => import('@/views/category/sub.vue')
      },
      {
        path: 'product/:id',
        component: () => import('@/views/goods/index.vue')
      }
    ]
  }

]

// 创建路由实例
const router =
createRouter({
  // hash路由
  history: createWebHashHistory(),
  // 路由映射配置
  routes,
  // 滚动行为
  scrollBehavior (to, from, savedPosition) {
    // 如果是首页就保留原来的位置
    if (to.path === '/') {
      return savedPosition
    } else {
      // 其他页面就回到顶部
      // 🎁vue2的配置和vue3有差别，x改成left，y改成top
      return { top: 0, behavior: 'smooth' }
    }
  }
})

// 导出路由实例
export default router
